<template>
  <div class="song-sheet">
    <div class="headerbar">
      <div class="goback" @click="turnBack">
        <i class="iconfont icon-backarrow"></i>
      </div>
      <div class="sheet-name">{{sheet_name}}</div>
    </div>
    <div class="songsheet-head">
      <!-- <div class="songsheet-head-bg"></div> -->
      <div class="songsheet-cover">
        <img :src="cover_url + '?param=120y120' " alt />
      </div>
      <div class="songsheet-info">
        <h2>{{description}}</h2>
        <div class="tag-box">
          <span v-for="itm in arr_tags" :key="itm">
            <em>{{itm}}</em>
          </span>
        </div>
      </div>
    </div>

    <div class="song-area" v-for="(item, index) in arr_privileges" :key="index">
      <div class="level-box">
        <p>{{index+1}}</p>
      </div>
      <div class="song-box">
        <SongInfo
          :song_name="item.name"
          :song_art="item.ar[0].name"
          :song_album="item.al"
          :song_belong_playlist="arr_play_list"
          :song_id="item.id"
          :song_alias="''"
        ></SongInfo>
      </div>
    </div>

    <!-- PlayerBar -->
    <PlayerBar></PlayerBar>
  </div>
</template>

<script>
import SongInfo from "@/components/SongInfo";
import PlayerBar from "@/components/PlayerBar";

export default {
  created() {
    this.id = this.$route.params.id;
    let url_songsheet = "/playlist/detail?id=" + this.id;
    this.axios.get(url_songsheet).then(res => {
      let tra = res.data.playlist.tracks;
      for (let index = 0; index < tra.length; index++) {
        this.arr_play_list.push([
          tra[index].id,
          tra[index].al.picUrl,
          tra[index].name,
          tra[index].ar[0].name
        ]);
      }
      this.sheet_name = res.data.playlist.name;
      this.description = res.data.playlist.description;
      this.cover_url = res.data.playlist.coverImgUrl;
      res.data.playlist.tags.forEach(element => {
        this.arr_tags.push(element);
      });
      this.arr_privileges.splice(0, this.arr_privileges.length);
      res.data.playlist.tracks.forEach(element => {
        this.arr_privileges.push(element);
      });
    });
  },
  data() {
    return {
      id: "",
      cover_url: "",
      sheet_name: "",
      description: "",
      arr_play_list: [],
      arr_tags: [],
      arr_privileges: []
    };
  },
  components: {
    SongInfo,
    PlayerBar
  },
  methods: {
    turnBack() {
      history.back();
    }
  }
};
</script>

<style lang="scss" scoped>
.song-sheet {
  position: relative;
  z-index: 2;
  .songsheet-head {
    position: relative;
    text-align: left;
    padding: 27px 20px;
    // padding-left: 0;
    height: 180px;
    overflow: hidden;
    .songsheet-cover {
      border-radius: 9px;
      position: relative;
      z-index: 30;
      display: inline-block;
      vertical-align: top;
      width: 126px;
      height: 126px;
      background-color: rgba($color: #ffffff, $alpha: 0.15);
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .songsheet-info {
      position: relative;
      z-index: 30;
      display: inline-block;
      vertical-align: top;
      padding-left: 20px;
      width: calc(100% - 130px);
      height: 100%;
      overflow: hidden;
      //   background-color: pink;
      h2 {
        color: #eeeeee;
        font-size: 18px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      .tag-box {
        padding-top: 20px;
        span {
          font-size: 12px;
          padding: 1px;
          border: 1px solid #eeeeee;
          border-radius: 6px;
          margin-right: 4px;
          em {
            color: #eeeeee;
          }
        }
      }
    }
  }
  .songsheet-head::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba($color: #ffffff, $alpha: 0.1);
    filter: blur(20px);
    // background-color: pink;
    z-index: 20;
  }
  .song-area {
    width: 100%;
    height: 50px;
    .level-box,
    .song-box {
      display: inline-block;
      vertical-align: top;
      height: 100%;
    }
    .level-box {
      width: 50px;
      line-height: 50px;
      font-size: 24px;
      color: #eeeeee;
      // background-color: #fff;
    }
    .song-box {
      width: calc(100% - 50px);
    }
  }
}
.headerbar {
  position: relative;
  height: 48px;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 1;
  .goback {
    float: left;
    color: #eeeeee;
    height: 100%;
    line-height: 48px;
    text-align: center;
    width: 32px;
    // padding-left: 20px;
  }
  .sheet-name{
    float: left;
    color: #eeeeee;
    height: 100%;
    line-height: 48px;
    text-align: left;
    padding-left: 20px;
    width: calc( 100% - 50px );
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>

